@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;

  --font-family: DM Sans,Helvetica,arial,sans-serif;
  --text-main-color: #1a46a1;
  --primary-color: #1c3e85;

  --green-color: rgba(106, 170, 3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
}

html, body {
  height: 100%;
  width: 100%;  
  font-family: DM Sans,Helvetica,arial,sans-serif;
}

a {
  text-decoration: none !important;
}

.field-title {
  position: relative;
  padding-left: 1rem;
}

.field-title::after {
  position: absolute;
  content: '';
  width: 0.3rem;
  height: 100%;
  left: 0;
  top: 0;
  background-color: var(--text-main-color);
}

.bgc-primary {
  background-color: var(--primary-color);
}

.carbon-bgc {
  background-color: var(--green-color);
}

.border-green {
  border: 1px solid var(--green-color);
}

.border-b-green {
  border-bottom: 1px solid var(--green-color);
}

.border-r-green {
  border-right: 1px solid var(--green-color);
}

.green-panel {
  position: relative;
  padding-left: 14px;
}

.green-panel::before {
  content: '';
  width: 10px;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  background-color: var(--green-color);
}